<template>
	<div class="orderDetail">
		<el-dialog title="订单详情" :visible.sync="visible" :close-on-click-modal="false" :show-close="false" v-if="order">
			<el-row>
				<el-col :span="12">
					<label>订单编号:</label>
					{{ order.orderNo }}
				</el-col>
				<el-col :span="12">
					<label>客户名字:</label>
					{{ order.customerName }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<label>客户留言:</label>
					{{ order.customerMessage }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label>状态:</label>
					{{ getStatus(order.status) }}
				</el-col>
				<el-col :span="12">
					<label>创建日期:</label>
					{{ order.createdDate }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label>支付日期:</label>
					{{ order.paidDate }}
				</el-col>
				<el-col :span="12">
					<label>订单总额:</label>
					{{ order.amount }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label>积分抵消额:</label>
					{{ order.creditsOffAmount }}
				</el-col>
				<el-col :span="12">
					<label>实际支付额:</label>
					{{ order.realAmount }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label>发货物流商:</label>
					{{ order.carrier }}
				</el-col>
				<el-col :span="12">
					<label>物流单号:</label>
					{{ order.trankNo }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label>发货人:</label>
					{{ order.shipper }}
				</el-col>
				<el-col :span="12">
					<label>发货时间:</label>
					{{ order.shipTime }}
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<label>优惠卷抵扣金额:</label>
					{{ order.couponOffAmount }}
				</el-col>
				<el-col :span="12">
					<label>代理卡抵扣金额:</label>
					{{ order.agentOffAmount }}
				</el-col>
			</el-row>
			<div v-if="order.orderaddress != null">
				<el-row>
					<el-col :span="12">
						<label>收货人:</label>
						{{ order.orderaddress.receiver }}
					</el-col>
					<el-col :span="12">
						<label>联系电话:</label>
						{{ order.orderaddress.phonenumber }}
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<label>地址:</label>
						{{ order.orderaddress.province + ' ' + order.orderaddress.city + ' ' + order.orderaddress.region }}
					</el-col>
					<el-col :span="12">
						<label>详细地址:</label>
						{{ order.orderaddress.address }}
					</el-col>
				</el-row>
			</div>
			<div>
				<el-row><label>产品信息:</label></el-row>
				<div v-for="product in order.productDTOList" :key="product.id">
					<el-row>
						<el-col :span="6"><el-image style="width: 100px; height: 100px" :preview-src-list="[product.imageUrl]" :src="product.imageUrl" fit="contain"></el-image></el-col>
						<el-col :span="12">
							<el-row>
								<el-col :span="24">{{ product.name }}</el-col>
							</el-row>
							<el-row>
								<el-col :span="4">
									<s>{{ product.price }}</s>
								</el-col>
								<el-col :span="4">{{ (product.price * product.discount).toFixed(2) }}</el-col>
								<el-col :span="4">{{ product.color }}</el-col>
								<el-col :span="4">{{ product.size }}</el-col>
								<el-col :span="4">X{{ product.num }}</el-col>
							</el-row>
							<el-row>
								<el-col :span="12"><el-button v-if="product.commentStatus != 0" @click="viewProductComment(product)" round size="small">查看评价</el-button></el-col>
								<el-col :span="12"><el-button v-if="product.orderApplyId" @click="viewOrderapply(product.orderApplyId)" round size="small">查看售后</el-button></el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>
			</div>
			<div slot="footer" class="dialog-footer"><el-button @click="dialogCancel()" round>关 闭</el-button></div>
		</el-dialog>
		<el-dialog title="评价详情" :visible.sync="productCommentVisible" :close-on-click-modal="false" :show-close="true">
			<div v-if="productComment">
				<el-row>
					<el-col :span="24">
						<label>评价状态:</label>
						<label v-if="productComment.auditStatus === 2">正常</label>
						<label v-if="productComment.auditStatus === 3">已删除</label>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<label>评价内容:</label>
						{{ productComment.comment }}
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<label>评价图片:</label>
						<el-image style="width: 100px; height: 100px" :preview-src-list="[imageUrl]" v-for="imageUrl in productComment.imageUrls" :src="imageUrl" :key="imageUrl" fit="contain"></el-image>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<label>评价星级:</label>
						{{ productComment.commentLevel }}
					</el-col>
					<el-col :span="12">
						<label>评价时间:</label>
						{{ productComment.commentTime }}
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<label>追加内容:</label>
						{{ productComment.extraComment }}
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<label>追加图片:</label>
						<el-image style="width: 100px; height: 100px" :preview-src-list="[imageUrl]" v-for="imageUrl in productComment.extraImageUrls" :src="imageUrl" :key="imageUrl" fit="contain"></el-image>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<label>评价时间:</label>
						{{ productComment.extraCommentTime }}
					</el-col>
					<el-col :span="12">
						<el-button v-if="productComment.auditStatus == 2" @click="deleteProductComment(productComment.id)" type="text" size="small">删除</el-button>
					</el-col>
				</el-row>
			</div>
		</el-dialog>
		<el-dialog title="售后详情" :visible.sync="orderapplyVisible" :close-on-click-modal="false" :show-close="true">
			<div v-if="orderapply">
				<div v-if="orderapply.applyType === 1">
					<!-- 我要退款(无需退货) -->
					<el-row>
						<el-col :span="12"><label>申请类型:我要退款(无需退货)</label></el-col>
						<el-col :span="12">
							<label>状态:</label>
							{{ getOrderApplyStatus(orderapply.status) }}
							<!-- <label v-if="orderapply.status === 1">未处理</label>
                                 <label v-if="orderapply.status === 2">处理中</label>
                                 <label v-if="orderapply.status === 3">已完成</label>
                                 <label v-if="orderapply.status === 4">已拒绝</label> -->
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>申请内容:</label>
							{{ orderapply.remark }}
						</el-col>
						<el-col :span="12">
							<label>申请日期:</label>
							{{ orderapply.applyDate }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>售后申请图:</label>
							<el-image style="width: 100px; height: 100px" :preview-src-list="[imageUrl]" v-for="imageUrl in orderapply.imageUrls" :src="imageUrl" :key="imageUrl" fit="contain"></el-image>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>处理类型:</label>
							<label v-if="orderapply.handleType === 1">退款中</label>
							<label v-if="orderapply.handleType === 2">已退款</label>
							<label v-if="orderapply.handleType === 3">已发货</label>
						</el-col>
						<el-col :span="12">
							<label>申请日期:</label>
							{{ orderapply.applyDate }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>原因:</label>
							{{ orderapply.reason }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>货物状态:</label>
							{{ orderapply.productStatus }}
						</el-col>
						<el-col :span="12">
							<label>退款商品数量:</label>
							{{ orderapply.num }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>退款金额:</label>
							{{ orderapply.returnMoney }}
						</el-col>
						<el-col :span="12">
							<label>退款备注:</label>
							{{ orderapply.returnMoneyRemark }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>处理人:</label>
							{{ orderapply.handlePerson }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12"><el-button v-if="orderapply.status == 1" @click="refund(orderapply.id)" size="small">退款</el-button></el-col>
						<el-col :span="12"><el-button v-if="orderapply.status == 1" @click="reject(orderapply.id)" size="small">拒绝</el-button></el-col>
					</el-row>
				</div>

				<div v-if="orderapply.applyType === 2">
					<!-- 退货退款 -->
					<el-row>
						<el-col :span="12"><label>申请类型:退货退款</label></el-col>
						<el-col :span="12">
							<label>状态:</label>
							{{ getOrderApplyStatus(orderapply.status) }}
							<!-- <label v-if="orderapply.status === 1">未处理</label>
                                 <label v-if="orderapply.status === 2">处理中</label>
                                 <label v-if="orderapply.status === 3">已完成</label>
                                 <label v-if="orderapply.status === 4">已拒绝</label> -->
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>申请内容:</label>
							{{ orderapply.remark }}
						</el-col>
						<el-col :span="12">
							<label>申请日期:</label>
							{{ orderapply.applyDate }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>售后申请图:</label>
							<el-image style="width: 100px; height: 100px" :preview-src-list="[imageUrl]" v-for="imageUrl in orderapply.imageUrls" :src="imageUrl" :key="imageUrl" fit="contain"></el-image>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>处理类型:</label>
							<label v-if="orderapply.handleType === 1">退款中</label>
							<label v-if="orderapply.handleType === 2">已退款</label>
							<label v-if="orderapply.handleType === 3">已发货</label>
						</el-col>
						<el-col :span="12">
							<label>申请日期:</label>
							{{ orderapply.applyDate }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>原因:</label>
							{{ orderapply.reason }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>处理人:</label>
							{{ orderapply.handlePerson }}
						</el-col>
						<el-col :span="12">
							<label>退款商品数量:</label>
							{{ orderapply.num }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>退款金额:</label>
							{{ orderapply.returnMoney }}
						</el-col>
						<el-col :span="12">
							<label>退款备注:</label>
							{{ orderapply.returnMoneyRemark }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>发货物流商:</label>
							{{ orderapply.carrier }}
						</el-col>
						<el-col :span="12">
							<label>物流单号:</label>
							{{ orderapply.trankNo }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-button v-if="orderapply.status == 1" @click="agree(orderapply.id)" size="small">同意退货</el-button>
							<el-button v-if="orderapply.status == 3" @click="refund(orderapply.id)" size="small">退款</el-button>
						</el-col>
						<el-col :span="12">
							<el-button v-if="orderapply.status == 1 || orderapply.status == 2 || orderapply.status == 3" @click="reject(orderapply.id)" size="small">
								拒绝
							</el-button>
						</el-col>
					</el-row>
				</div>

				<div v-if="orderapply.applyType === 3">
					<!-- 换货 -->
					<el-row>
						<el-col :span="12"><label>申请类型:换货</label></el-col>
						<el-col :span="12">
							<label>状态:</label>
							{{ getOrderApplyStatus(orderapply.status) }}
							<!-- <label v-if="orderapply.status === 1">未处理</label>
                                 <label v-if="orderapply.status === 2">处理中</label>
                                 <label v-if="orderapply.status === 3">已完成</label>
                                 <label v-if="orderapply.status === 4">已拒绝</label> -->
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>申请内容:</label>
							{{ orderapply.remark }}
						</el-col>
						<el-col :span="12">
							<label>申请日期:</label>
							{{ orderapply.applyDate }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>售后申请图:</label>
							<el-image style="width: 100px; height: 100px" :preview-src-list="[imageUrl]" v-for="imageUrl in orderapply.imageUrls" :src="imageUrl" :key="imageUrl" fit="contain"></el-image>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>处理类型:</label>
							<label v-if="orderapply.handleType === 1">退款中</label>
							<label v-if="orderapply.handleType === 2">已退款</label>
							<label v-if="orderapply.handleType === 3">已发货</label>
						</el-col>
						<el-col :span="12">
							<label>申请日期:</label>
							{{ orderapply.applyDate }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<label>原因:</label>
							{{ orderapply.reason }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>处理人:</label>
							{{ orderapply.handlePerson }}
						</el-col>
						<el-col :span="12">
							<label>退款商品数量:</label>
							{{ orderapply.num }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>退款金额:</label>
							{{ orderapply.returnMoney }}
						</el-col>
						<el-col :span="12">
							<label>退款备注:</label>
							{{ orderapply.returnMoneyRemark }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>发货物流商:</label>
							{{ orderapply.carrier }}
						</el-col>
						<el-col :span="12">
							<label>物流单号:</label>
							{{ orderapply.trankNo }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<label>商家物流商:</label>
							{{ orderapply.resendCarrier }}
						</el-col>
						<el-col :span="12">
							<label>商家物流单号:</label>
							{{ orderapply.resendTrankno }}
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-button v-if="orderapply.status == 1" @click="agree(orderapply.id)" size="small">同意换货</el-button>
							<el-button v-if="orderapply.status == 5" @click="send(orderapply.id)" size="small">填写换货物流</el-button>
						</el-col>
						<el-col :span="12"><el-button v-if="orderapply.status == 1 || orderapply.status == 5" @click="reject(orderapply.id)" size="small">拒绝</el-button></el-col>
					</el-row>
				</div>
			</div>
			<!-- <block v-if="orderapply">
				<div class="title" v-if="orderapply.imageUrls == null? false: true">售后详情图</div>
				<div class="block" v-if="orderapply.imageUrls == null? false: true" style="display:flex;align-items: center;" >
					<el-image v-for="fit in 3" :key="fit"
					style="width: 100px; height: 100px; margin: 20px"
					src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
					fit="fill"></el-image>
				</div>
			</block> -->
			
		</el-dialog>
		
		<el-dialog title="退款" :visible.sync="refundVisible" :close-on-click-modal="false" :show-close="true">
			<el-form :model="refundData" label-position="right" label-width="100px" ref="refundDataForm">
				<el-form-item label="退款金額" prop="returnMoney"><el-input v-model="refundData.returnMoney" /></el-form-item>
				<el-form-item label="退款备注" prop="returnMoneyRemark"><el-input v-model="refundData.returnMoneyRemark" /></el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="refundVisible = false" plain type="warning">取消</el-button>
				<el-button @click="submitRefundData" plain type="primary">确定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="拒绝" :visible.sync="rejectVisible" :close-on-click-modal="false" :show-close="true">
			<el-form :model="rejectData" label-position="right" label-width="100px" ref="rejectDataForm">
				<el-form-item label="备注" prop="returnMoneyRemark"><el-input v-model="rejectData.returnMoneyRemark" /></el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="rejectVisible = false" plain type="warning">取消</el-button>
				<el-button @click="submitRejectData" plain type="primary">确定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="发货" :visible.sync="sendVisible" width="40%">
			<el-form :model="sendData" ref="sendDataForm">
				<el-form-item label="发货物流商：" label-width="120px" prop="resendCarrier">
					<el-select v-model="sendData.resendCarrier" placeholder="发货物流商" clearable>
						<el-option v-for="item in kuaidiList" :key="item.key" :label="item.label" :value="item.label"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物流号：" label-width="120px" prop="resendTrankno"><el-input v-model="sendData.resendTrankno" autocomplete="off"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="sendVisible = false">取 消</el-button>
				<el-button type="primary" @click="sendSubmit()">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { get, postJson, postXform } from '@/utils/request.js';
export default {
	// id即编辑的id，visible属性用来监听是否显示弹窗
	props: ['id', 'visible'],
	watch: {
		id: function() {
			let that = this;
			if (that.id) {
				this.$https.get('order/orderDetail', { id: that.id }).then(res => {
					that.order = res.data.data;
				});
			}
		},
		visible: function() {
			let that = this;
		}
	},
	data() {
		return {
			kuaidiList: [],
			statusList: [],
			order: null,
			productCommentVisible: false,
			productComment: null,
			orderapplyVisible: false,
			orderapply: null,
			orderapplyStatus: [],
			refundVisible: false,
			refundData: {
				id: null,
				returnMoney: 0,
				returnMoneyRemark: ''
			},
			rejectVisible: false,
			rejectData: {
				id: null,
				returnMoneyRemark: ''
			},
			sendVisible: false,
			sendData: {
				id: '',
				resendCarrier: '',
				resendTrankno: ''
			}
		};
	},
	methods: {
		// 取消，关闭弹窗
		dialogCancel() {
			// vue伪双向绑定，使用visible时需要使用v-bind:visible.sync="visible"方式
			this.$emit('update:visible', false);
		},
		deleteProductComment(id) {
			postXform('order/deleteComment', { id: id }).then(res => {
				this.$message({ message: '删除成功', type: 'success' });
				this.productComment.auditStatus = 3;
			});
		},
		resend(id) {},
		refund(id) {
			this.refundVisible = true;
			this.refundData.id = id;
			// 自动计算金额，退还数量/此产品数量*此产品总价*订单实际支付/订单总额
			this.refundData.returnMoney =
				(this.orderapply.num / this.orderapply.applyProduct.num) * this.orderapply.applyProduct.amount * (this.order.realAmount / this.order.amount);
			this.refundData.returnMoney = this.refundData.returnMoney.toFixed(2);
			this.refundData.returnMoneyRemark = '';
		},
		submitRefundData() {
			postXform('order/onlyRefund', {
				id: this.refundData.id,
				amount: this.refundData.returnMoney,
				returnMoneyRemark: this.refundData.returnMoneyRemark
			}).then(res => {
				this.$message({ message: '提交成功', type: 'success' });
				this.refundVisible = false;
				this.viewOrderapply(this.orderapply.id);
			});
		},
		reject(id) {
			this.rejectVisible = true;
			this.rejectData.id = id;
			this.rejectData.returnMoneyRemark = '';
		},
		submitRejectData() {
			postXform('order/rejectApply', {
				id: this.rejectData.id,
				returnMoneyRemark: this.rejectData.returnMoneyRemark
			}).then(res => {
				this.$message({ message: '提交成功', type: 'success' });
				this.rejectVisible = false;
				this.viewOrderapply(this.orderapply.id);
			});
		},
		agree(id) {
			postXform('order/agreeBack', { id: id }).then(res => {
				this.$message({ message: '提交成功', type: 'success' });
				this.viewOrderapply(this.orderapply.id);
			});
		},
		send(id) {
			this.sendVisible = true;
			this.sendData.id = id;
			this.sendData.resendCarrier = '';
			this.sendData.resendTrankno = '';
		},
		sendSubmit() {
			postXform('order/resend', {
				id: this.sendData.id,
				resendCarrier: this.sendData.resendCarrier,
				resendTrankno: this.sendData.resendTrankno
			}).then(res => {
				this.$message({ message: '提交成功', type: 'success' });
				this.viewOrderapply(this.orderapply.id);
			});
		},
		viewProductComment(product) {
			get('order/getProductComment', {
				orderId: this.order.id,
				sku: product.sku
			}).then(res => {
				this.productComment = res.data.data;
				if (this.productComment.imageUrls) {
					this.productComment.imageUrls = JSON.parse(this.productComment.imageUrls);
				}
				this.productCommentVisible = true;
			});
		},
		viewOrderapply(orderApplyId) {
			get('order/getOrderApplyDetail', { id: orderApplyId }).then(res => {
				this.orderapply = res.data.data;
				this.orderapplyVisible = true;
				console.log(this.orderapply,'售后订单详情')
			});
		},
		getStatus(status) {
			for (let i = 0; i < this.statusList.length; i++) {
				if (this.statusList[i].key == status) {
					return this.statusList[i].label;
				}
			}
			return '';
		},
		getOrderApplyStatus(status) {
			for (let i = 0; i < this.orderapplyStatus.length; i++) {
				if (this.orderapplyStatus[i].key == status) {
					return this.orderapplyStatus[i].label;
				}
			}
			return '';
		}
	},
	mounted() {
		get('order/kuaidi').then(res => {
			this.kuaidiList = res.data.data;
		});
		get('order/orderStatus').then(res => {
			this.statusList = res.data.data;
		});
		get('orderapply/orderApplyStatus').then(res => {
			this.orderapplyStatus = res.data.data;
		});
	}
};
</script>

<style lang="less">
.orderDetail {
	.el-row {
		padding: 5px;
		margin-bottom: 5px;
		border-bottom: 1px solid lightgray;
	}
}
</style>
